<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="客户资源"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell is-link @click="showPopup" required  v-model="province" title="请选择省份"/>
    <van-cell is-link @click="showPopup1" required v-model="city" title="请选择城市"/>
    <div style="margin-top:10px;">

    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <van-cell  v-for="item in list " :key="item" :label="item.province + ' ' + item.city + ' ' + (item.name ? item.name : '') " title-style="width:60%;">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">{{item.nickname}}</span>

          <van-tag :type="item.lxflag == '1' ?'success':'danger' " style="margin-left: 5px;">{{item.lxflag == '1'? item.lxbz :'未联系'}}</van-tag>
        </template>

        <template #default>
          <span style="color: blue"  @click="doCall(item)" >
            {{item.phonenumber}}
          </span>
        </template>

      </van-cell>
    </van-list>

    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-action-sheet v-model="show1" :actions="actions1" @select="onSelect1" />

  </div>
</template>

<script>

import { Popup, Cell, Area, ActionSheet, Toast } from 'vant'
import { queryProvinceList, queryCityList, queryWxuserList, updateWxuserLxflag } from '../../api/api'

export default {
  name: 'Customer',
  data() {
    return {
      show: false,
      actions: [],
      value: '',
      show1: false,
      actions1: [],
      province: '',
      city: '',
      list: [],
      finished: true,
      loading: false
    }
  },

  created() {
    this.ywyname = this.$store.getters.userName
    this.queryProvinceList()
    this.queryCityList()
    this.onLoad()
  },
  mounted() {

  },

  methods: {

    onLoad() {
      const param = {}
      param.province = this.province
      param.city = this.city
      const userid = this.$store.getters.userId
      queryWxuserList(param).then(response => {
        if (response.code === 200) {
          this.list = response.rows
          console.log('查询列表', this.list)
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    showPopup() {
      this.show = true
    },

    showPopup1() {
      this.show1 = true
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.province = item.name
      this.show = false
      this.queryCityList()
      this.onLoad()
    },
    onSelect1(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false
      this.city = item.name
      this.onLoad()
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    queryProvinceList() {
      const param = {}
      const userid = this.$store.getters.userId
      queryProvinceList(param).then(response => {
        if (response.code === 200) {
          console.log('省份列表', response)
          const actions = []
          const rows = response.rows
          if (rows) {
            for (var i = 0; i < rows.length; i++) {
              actions.push({ name: rows[i].province })
            }
          }
          this.actions = actions
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    queryCityList() {
      const param = {}
      const userid = this.$store.getters.userId
      param.province = this.province
      queryCityList(param).then(response => {
        if (response.code === 200) {
          console.log('城市列表', response)
          const actions1 = []
          const rows = response.rows
          if (rows) {
            for (var i = 0; i < rows.length; i++) {
              actions1.push({ name: rows[i].city })
            }
          }
          this.actions1 = actions1
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doCall(item) {
      console.log(item)
      window.location.href = 'tel://' + item.phonenumber
      const param = {}
      const userid = this.$store.getters.userId
      param.wxuserid = item.wxuserid
      param.lxbz = this.ywyname + '已联系'
      updateWxuserLxflag(param).then(response => {
        if (response.code === 200) {
          // Toast.success('保存成功')
        } else {
          Toast.fail(response.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #f8f8f8;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: white;
    padding-bottom: 150px;
  }

</style>
